<template>
  <j-modal
    :title="'数据概要'"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :fullscreen="true"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button> 
    </template>
    <a-spin :spinning="confirmLoading"> 
       <base-info :dataSetInfo="dataSetInfo"></base-info>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          class="j-table-force-nowrap"
          :scroll="{ x: true }"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          @change="handleTableChange"
        >
        </a-table> 
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import BaseInfo from './dataSet/BaseInfo' 

export default {
  name: 'ExtractModal',
  mixins: [JeecgListMixin],
  components: { 
  BaseInfo
  },
  data() {
    return {
      title: '',
      dataSetInfo:{
        code:''
      },
      dataSetId:0,
      width: 900,
      height: 500,  
      visible: false,
      disableSubmit: false,
      // url: {
      //   list: "/dataHistory/dataHistory/list"
      // },
      model: {
        propName: '',
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
    }
  },
  methods: {
     show(data) {  
      this.columns = []
      this.dataSource =[] 
      this.dataSetId = data.id;
      this.dataSetInfo = Object.assign({},data);
      this.loadDataProperty() 
    },
    loadDataProperty() {
      var that = this
      httpAction('/dataProperty/dataProperty/list?pageSize=99999', {}, 'get')
        .then((res) => {
          if (res.success) {
            that.dataPropertyList = res.result.records
            that.loadDetailData()
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {})
    },
    getPropertyText(key) {
      let filterList = this.dataPropertyList.filter((item) => item.propNo == key)
      if (filterList.length > 0) {
        return filterList[0].propName
      }
      return key
    }, 
   
    loadDetailData() { 
      var that = this;
      this.visible = true
      this.confirmLoading = true
      httpAction('/dataSet/dataSet/queryByIdDesc?id='+that.dataSetId, {}, 'get')
        .then((res) => { 
          if (res.success) { 
            var list = []
            //var data = res.result.records
            var data = res.result
            that.columns =  [{
                title: '',
                dataIndex: 'index',
                key: 'index',
                width: 60,
                fixed: 'left',
                align: 'center'
            }]
            for (let i = 0; i < data['columns'].length; i++) {
              const key = data['columns'][i];
               that.columns.push( {
                  title: that.getPropertyText(key),
                  align: 'center',
                  dataIndex: key,
                } ) 
            }
            that.dataSource =[];
            
            for (let i = 0; i < data['data'].length; i++) {
              var obj ={ 'index': data['index'][i] };
               for (let j = 0; j < data['data'][i].length; j++) {
                 //that.dataSource.push(data['data'][i]}); 
                  obj[data['columns'][j]] = data['data'][i][j] 
               } 
              that.dataSource.push(obj);
            }
          console.log(that.dataSource); 
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
        })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$emit('close')
      this.visible = false
    }, 
    handleCancel() {
      this.close()
    }
  },
}
</script>